<template>
  <el-form :model="form" style="width: 290px; margin: 0 auto">
    <el-form-item>
      <el-row :gutter="20">
        <el-col :span="12" :offset="6" style="text-align: center">
          <el-image :src="url" fit="fill"></el-image>
        </el-col>
      </el-row>
    </el-form-item>

    <el-form-item>
      <el-input
        v-model="form.username"
        placeholder="请输入登录手机号"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item v-if="loginType === 0" style="margin-bottom: 0">
      <el-input
        v-model="form.password"
        type="password"
        placeholder="请输入密码"
        autocomplete="off"
      ></el-input>
    </el-form-item>

    <el-form-item v-if="loginType === 1" style="margin-bottom: 0">
      <el-row>
        <el-col :span="12"
          ><el-input
            v-model="form.sms"
            type="sms"
            placeholder="请输入验证码"
            autocomplete="off"
          ></el-input
        ></el-col>

        <el-col :span="12" style="text-align: right">
          <el-button type="text" @click="getSms" :disabled="smsBtnDisabled">{{
            smsBtnText
          }}</el-button>
        </el-col>
      </el-row>
    </el-form-item>

    <div class="tools">
      <el-button type="text" @click="changeLoginType">{{
        loginType === 0 ? "验证码登录" : "密码登录"
      }}</el-button>
      <el-button v-if="loginType === 0" type="text">忘记密码</el-button>
    </div>

    <el-form-item>
      <el-button
        type="primary"
        style="display: block; margin: 0 auto; width: 100%"
        @click="onSubmit"
        >登录</el-button
      >
    </el-form-item>

    <el-form-item style="text-align: center">
      <el-button type="text">立即注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, getCurrentInstance } from "vue";

export default defineComponent({
  setup() {
    const { proxy }: any = getCurrentInstance();

    const state = reactive({
      loginType: 0, //默认0账号密码，1短信验证码，2微信扫码
      smsBtnText: "获取验证码",
      smsBtnDisabled: false,
      url: require("@/assets/images/home/logo-header-dark.png"),
      form: {
        username: "",
        password: "",
        sms: "",
      },
    });

    const changeLoginType: any = (): void => {
      if (state.loginType === 1) {
        state.loginType = 0;
      } else if (state.loginType === 0) {
        state.loginType = 1;
      }
    };

    // 发送验证码倒计时
    const getSms: any = (): void => {
      state.smsBtnDisabled = true;
      let i = 10;
      let timer = setInterval(() => {
        state.smsBtnText = `获取验证码(${i}s)`;
        i--;
        if (i < 0) {
          state.smsBtnDisabled = false;
          state.smsBtnText = "获取验证码";
          clearInterval(timer);
        }
      }, 1000);
    };

    const onSubmit = () => {
      console.log("submit!");
    };

    return {
      ...toRefs(state),
      onSubmit,
      changeLoginType,
      getSms,
    };
  },
});
</script>

<style lang="scss" scoped>
.tools {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>>